<template>
    <!-- 订单利润 -->
    <PopUps v-if="popFlag" widthMy='60%'  height-my="78%">
        <!-- 利润详情 -->
        <OrderDetail @closePopUps="closePopUps" :rowDataDetail="rowDataDetail" />
    </PopUps>

    <!-- 订单利润表格 -->
    <el-table ref="multipleTableRef" highlight-current-row :data="tableData" fit :max-height="tableHeight"
        @selection-change="handleSelectionChange" style="width: 100%; overflow-y: scroll;"
        :header-cell-style="{ 'color': '#333', 'background': `#f6f6f6 !important` }" @select="handleSelect"
        :row-class-name="tableRowClassName">
        <el-table-column type="selection" width="55" :align="'center'" fixed />
        <el-table-column label="单据日期" width="120" :align="'center'">
            <template #default="scope">{{ scope.row.orderTime }}</template>
        </el-table-column>
        <el-table-column property="order" label="单据编号" width="160" :align="'center'" show-overflow-tooltip/>
        <el-table-column property="businessType" label="业务类型" width="100" :align="'center'" show-overflow-tooltip/>
        <el-table-column property="client" label="客户名称" width="180" :align="'center'"show-overflow-tooltip />
        <el-table-column property="stores" label="终端门店" width="140" :align="'center'" show-overflow-tooltip/>
        <el-table-column property="clientType" label="客户类型" width="120" :align="'center'" show-overflow-tooltip/>
        <el-table-column property="make" label="制作内容" width="80" :align="'center'" show-overflow-tooltip/>
        <el-table-column property="taxes" label="税金" width="80" :align="'center'" show-overflow-tooltip/>
        <el-table-column property="installationFee2" label="安装费(按天)" width="80" :align="'center'"show-overflow-tooltip />
        <el-table-column property="installationFee" label="安装费(固定)" width="80" :align="'center'" show-overflow-tooltip/>
        <el-table-column property="material" label="材料费" width="80" :align="'center'" show-overflow-tooltip/>
        <el-table-column property="chengguan" label="城管费" width="80" :align="'center'" show-overflow-tooltip/>
        <!-- <el-table-column property="relevancy" label="关联杂费" width="80" :align="'center'" /> -->
        <el-table-column property="outsourcing" label="已外协金额" width="120" :align="'center'" show-overflow-tooltip/>
        <el-table-column property="allpirce" label="订单总金额" width="120" :align="'center'" show-overflow-tooltip/>
        <el-table-column property="costpirce" label="成本总额" width="80" :align="'center'" show-overflow-tooltip/>
        <el-table-column property="grossprofit" label="毛利润" width="80" :align="'center'" show-overflow-tooltip/>
        <el-table-column property="grossmargin" label="毛利率" width="80" :align="'center'" show-overflow-tooltip/>
        <el-table-column property="salesman" label="业务员" width="80" :align="'center'" show-overflow-tooltip/>
        <el-table-column property="person" label="制单人" width="80" :align="'center'" show-overflow-tooltip/>
        <el-table-column property="setting" label="操作" width="80" :align="'center'" fixed="right">
            <p style="color: #FF9B32;cursor: pointer;" @click="popFlag = true">详情</p>
        </el-table-column>
    </el-table>


    <div class="pageNum">
        <p></p>
        <Pagination :hidden="totals > 0"  :total="totals" :page="pageNum" :limit="pageSize" @pagination="handleChange"
            @update:page="updatePage" @update:limit="updateLimit"  />
    </div>
</template>
<script setup>
import { ref, defineProps, computed } from 'vue'
import Pagination from '@/components/Pagination/index'
import PopUps from '@/components/My/PopUps/index.vue'
import OrderDetail from '@/components/My/OrderDetail/index.vue'
import { getselectOrderApi } from '@/api/tickets/index.js'

// 表格高度
let tableHeight = ref(window.innerHeight - 350)
// 表格
import { ElTable } from 'element-plus'
// 订单详情模态框显示
let popFlag = ref(false)
let props = defineProps({
    boder: {
        type: Boolean,
        default: false,
        required: false // 是否必传
    },
    bg: {
        type: String,
        default: '#7386D1',
        required: false // 是否必传
    },
    tableData: {
        type: Object,
        default: [],
        required: false // 是否必传
    },
})

// 获取点击操作的id
let selectID = ref([])
const multipleTableRef = ref()
const multipleSelection = ref([])
// 订单详情数据
let rowDataDetail = ref([])


// 关闭详情模态框
const closePopUps = () => {
    popFlag.value = false
}
// 当选择项发生变化时会触发该事件
const handleSelectionChange = (val) => {
    multipleSelection.value = val
    return 'color:red'
}

// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 当前页面位置发生变化
const updatePage = (val) => {
    console.log(val);
}
// 条目个数发生变化
const updateLimit = (val) => {
    console.log(val);
}

// 拿到选中的行id
const handleSelect = (row) => {
    selectID.value = []
    if (row.length > 0) {
        row.forEach((value, index) => {
            selectID.value.push(value.id)
        })
    }
}
// 选中背景色
const tableRowClassName = ({ row, rowIndex }) => {
    let color = ''
    for (let item of selectID.value.values()) {
        if (item === row.id) color = 'table-SelectedRow-bgcolor'
    }
    return color
}
const getselectOrderData = async (data) => {
    let data1 = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    }
    let params = Object.assign(data1, data)
    let { code, rows, total } = await getselectOrderApi(params)
    if (code == 200) {
        // rows.map(v => {
        //     v.designDrawings = JSON.parse(v.designDrawings)
        // })
        tableData.value = rows
        console.log(tableData.value);
        totals.value = total
    }
}
// 分页器大小  当前分页器
const handleChange = (v) => {
    let { page, limit } = v.page
    pageNum.value = page
    pageSize.value = limit

    let params = financeForm.value
    getselectOrderData(params)
}
onMounted(() => {
    getselectOrderData()
    // 监听浏览器屏幕变化展示对应的高度
    window.onresize = () => {
        return (() => {
            tableHeight.value = window.innerHeight - 280;
        })();
    };
});
</script>
<style lang='scss' scoped>


.icon-close {
    background: #FFFFFF;
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #707070;
    color: #1946FF;
}

.closeBtn {
    background: #1946FF;
    color: #fff;
    margin-top: 10px;
}

// 鼠标放上去显示背景颜色
// .el-table {
//     --el-table-row-hover-bg-color: #dfdfdf60;
// }

.table-SelectedRow-bgcolor {
    td {
        background-color: #E2E7FF !important;
    }
}


.is-dark {
    text-align: center;

}



.cell {
    display: flex;
    align-items: center;
    justify-content: center;

    .active {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 23px;
        height: 23px;
        background: linear-gradient(180deg, #E2E7FF 0%, #FFFFFF 100%);
        border-radius: 4px 4px 4px 4px;
    }
}

.pageNum {
    margin-top: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>
<style lang="scss">
.el-popover.el-popper {
    min-width: 70px !important;
}

.popoverTable {
    width: 60px !important;
    padding: 0 !important;
    color: #666666;

    .table-setting {
        text-align: center;
        box-sizing: border-box;
    }

    p {
        margin: 0;
        height: 30px;
        line-height: 30px;
        font-size: 14px;

        &:hover {
            background: linear-gradient(180deg, #E2E7FF 0%, #FFFFFF 100%);
            color: #1947FF;
            border: 1px solid #1947FF;
        }
    }
}
</style>
